<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.1-rc2/jquery.min.js"></script>
</head>
<body>
市：<select name="" id="city">
</select>
县/区：<select name="" id="area">
</select>
<script>
    $(function(){
        $.getJSON('city.json',function(data){
            //console.log(data);
            function fn_city(){
                $(data).each(function (cityIndex, city){
                    var city_option_list = '<option value="'+ city.city_name +'">'+ city.city_name +'</option>';//城市选项列表
                    $("#city").append(city_option_list);//将城市添加到下拉框中
                    if($("#city").val() === city.city_name){
                        var area_option_list
                        $(city.area_list).each(function(areaIndex,area){
                            area_option_list = area_option_list + '<option value="'+ area.area_name +'">'+ area.area_name +'</option>';//城市选项列表
                            $("#area").html(area_option_list);//将城市添加到下拉框中
                        });
                    }
                });
            };
            fn_city();//运行城市列表添加函数
            function fn_area() {
                var city_value = $("#city").val();
                $(data).each(function (cityIndex, city) {
                    if(city_value === city.city_name){
                        var area_option_list
                        $(city.area_list).each(function(areaIndex,area){
                            area_option_list = area_option_list + '<option value="'+ area.area_name +'">'+ area.area_name +'</option>';//城市选项列表
                            $("#area").html(area_option_list);//将城市添加到下拉框中
                        });
                    }
                })
            };
            fn_area();//初始化城镇列表
            $("#city").change(function(){//城市改变后更新城镇列表
                fn_area();
            });
        });
    })
</script>
</body>
</html>